<script setup> 

import { articleStore } from  '@/store/index';
import {onMounted, ref }from 'vue' 
 import bgImage from '@/assets/image/bg-image.jpg'

 import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';



const id = 'preview-only';
const articleComment = ref(`#  本地部署指南

##  前端项目启动

\`\[\](file://e:\vueProject\blog\blog-v3-develop\README.md)bash
# 进入项目目录
cd blog-v3

# 安装依赖
pnpm install

# 启动项目
pnpm run serve
\[\](file://e:\vueProject\blog\blog-v3-develop\README.md)\`

##  后端配置说明

请确保数据库已导入 \`online_blog.sql\` 并正确配置 \`.env\`。

##  推荐部署方式

使用宝塔面板部署 nginx + Node.js，简单易用。
# 启动项目1
pnpm run serve
\[\](file://e:\vueProject\blog\blog-v3-develop\README.md)\`

##  后端配置说明1

请确保数据库已导入 \`online_blog.sql\` 并正确配置 \`.env\`。

##  推荐部署方式1

使用宝塔面板部署 nginx + Node.js，简单易用。
# 启动项目2
pnpm run serve
\[\](file://e:\vueProject\blog\blog-v3-develop\README.md)\`

##  后端配置说明2

请确保数据库已导入 \`online_blog.sql\` 并正确配置 \`.env\`。

##  推荐部署方式2

使用宝塔面板部署 nginx + Node.js，简单易用。
# 启动项目3
pnpm run serve
\[\](file://e:\vueProject\blog\blog-v3-develop\README.md)\`

##  后端配置说明3

请确保数据库已导入 \`online_blog.sql\` 并正确配置 \`.env\`。

##  推荐部署方式3

使用宝塔面板部署 nginx + Node.js，简单易用。
# 启动项目4
pnpm run serve
\[\](file://e:\vueProject\blog\blog-v3-develop\README.md)\`

##  后端配置说明4

请确保数据库已导入 \`online_blog.sql\` 并正确配置 \`.env\`。

##  推荐部署方式4

使用宝塔面板部署 nginx + Node.js，简单易用。
`);
const scrollElement = document.body;

const StaticArticleDetail= {
        id:1,
        title:"如何使用Vue3",
        banner:bgImage,
        desc:"Vue3是一个新的前端框架，它基于Vue2.0，并且具有更好的性能和更高的开发体验。",
        createTime:"2025-09-01 10:00:00",
        updateTime:"2025-09-01 10:00:00",
        views:"1W",
        likes:"1W",
        comments:10,
        tags:["Vue3","前端"],
        category:"前端",
        readDuration:"10分钟",
        
    };

 const actioleDetail=ref(null);

 onMounted(()=>{
 
      actioleDetail.value=StaticArticleDetail
      articleStore().setArticle(actioleDetail.value)
 })



</script>

<template>
    <div >
            <el-row :gutter="20">
                <el-col :sm="18" :xs="24"> 
                 <el-card>
                     <MdPreview :id="id" :modelValue="articleComment"/>
                <div class="copyright-info p-[20px] border border-slate-200">
                    <div class="m-[10px] w-[100%]">
                        <div class="item flex items-center w-[100%]">
                            <div class="label">作者</div>
                            <div class="value">M</div>
                        </div>
                        <div class="item flex items-center w-[100%]">
                            <div class="label">类型</div>
                            <div class="value">原创</div>
                        </div>
                        <div class="item flex items-center w-[100%]">
                            <div class="label">本文链接</div>
                            <div class="value">http://localhost:8080/detail?id=1</div>
                        </div>
                        <div class="item flex items-center w-[100%]">
                            <div class="label">声明</div>
                            <div class="value">此文章版权归 M 所有，如有转载，请注明来自原作者</div>
                        </div>
                    </div>
                         
                     </div>
                     </el-card>
                   
                </el-col>
                  <el-col :sm="6" :xs="0"> 
                    <el-affix offset="60">
                    <el-card >
                        <div class="w-[100%] max-h[60vh] py-[0.5rem]">
                     <MdCatalog :editorId="id" :scrollElement="scrollElement"  :offsetTop="100" :scrollElementOffsetTop="80" />

                        </div> 
                    </el-card>
                    </el-affix>
                    
                </el-col>
            </el-row>


    </div>    
</template>

<style lang="scss" scoped>
.label{
    position:relative;
    margin-right: 0.5rem;
    
}
.label::before{
    content: ":";
    position:absolute;
    top:0;
    right: -0.3rem;
}


</style>